<template>
  <div class="app-container">
    <!-- 搜索框卡片 -->
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
            style="float: right"
            type="primary"
            @click="handleSearchList()"
            size="small"
        >
          查询
        </el-button>
        <el-button
            style="float: right; margin-right: 15px"
            @click="handleResetSearch()"
            type="primary"
            size="small"
        >
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form
            :inline="true"
            :model="curListQuery"
            size="small"
            label-width="100px"
            @submit.native.prevent
        >
          <el-form-item label="输入搜索：">
            <el-input
                v-model="curListQuery.name"
                class="input-width"
                placeholder="建筑名"
                clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="区域：">
            <city-cascader :value="curListQuery.city" @change="val => {curListQuery.city = val}" :is-search="true"></city-cascader>
          </el-form-item>
        </el-form>
        <el-form size="small" label-width="100px" inline style="height: 52px">
          <el-form-item label="类别：">
            <category-cascader v-model="curListQuery.categories" :is-search="true"></category-cascader>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- 操作卡片 -->
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button
          size="mini"
          class="btn-add"
          @click="handleAdd()"
          style="margin-left: 20px"
      >添加</el-button
      >
    </el-card>
    <!-- 建筑列表 -->
    <div class="table-container">
      <el-table
          ref="shopTable"
          :data="list"
          style="width: 100%"
          v-loading="listLoading"
          border
          stripe
      >
        <el-table-column
            type="index"
            :index="getIndex"
            label="序号"
            width="60"
        ></el-table-column>
        <el-table-column label="建筑名称" align="center">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column label="所在城市" align="center">
          <template slot-scope="scope">{{ scope.row.city }}</template>
        </el-table-column>
        <el-table-column label="纬度" align="center">
          <template slot-scope="scope">{{ scope.row.latitude }}</template>
        </el-table-column>
        <el-table-column label="经度" align="center">
          <template slot-scope="scope">{{ scope.row.longitude }}</template>
        </el-table-column>
        <el-table-column label="海拔" align="center">
          <template slot-scope="scope">{{ scope.row.altitude }}</template>
        </el-table-column>
        <el-table-column label="大类" width="160" align="center">
          <template slot-scope="scope">{{ scope.row.largeCate }}</template>
        </el-table-column>
        <el-table-column label="中类" width="140" align="center">
          <template slot-scope="scope">{{ scope.row.midCate }}</template>
        </el-table-column>
        <el-table-column label="小类" width="140" align="center">
          <template slot-scope="scope">{{ scope.row.minCate }}</template>
        </el-table-column>
        <el-table-column label="年代" align="center">
          <template slot-scope="scope">{{ scope.row.period }}</template>
        </el-table-column>
        <!--操作-->
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="success"
                @click="handleDisplay(scope.$index, scope.row)"
            >查看
            </el-button>
            <el-button
                size="mini"
                type="text"
                @click="handleUpdate(scope.$index, scope.row)"
            >编辑
            </el-button>
            <el-button
                size="mini"
                type="text"
                @click="handleDelete(scope.$index, scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :current-page.sync="listQuery.pageNum"
          :page-size="listQuery.pageSize"
          :page-sizes="[5, 10, 15]"
          :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { deleteArchi, fetchList, selectByName, searchArchis } from "@/api/info";
import { confirm } from "@/utils/confirm";
import store from "@/store"; // 导入 vuex
import CategoryCascader from "@/views/info/components/CategoryCascader";
import CityCascader from "@/views/info/components/CityCascader";

const defaultListQuery = {
  // 默认的
  pageNum: 1, // 页码
  pageSize: 5, // 页大小
  name: null,
  city: null,
  categories: {
    large: null,
    mid: null,
    min: null
  }
};

const defaultArchi = {
  name: null,
  city: null,
  latitude: null,
  longitude: null,
  altitude: null,
  largeCate: null,
  midCate: null,
  minCate: null,
  period: null,
  protectType: null,
  desc: null,
};

export default {
  name: "index",
  components: {CategoryCascader, CityCascader},
  data() {
    return {
      listQuery: Object.assign({}, defaultListQuery),
      list: null, // 表中数据
      total: null, // 用于分页
      listLoading: false, // 用于表格加载时的转圈圈图
      curListQuery: Object.assign({}, defaultListQuery)
    };
  },
  created() {
    // console.log(store.getters.listQuery);
    this.listQuery = store.getters.listQuery; // 从vuex中恢复查询参数
    if (this.listQuery.name != null) {
      // 说明之前用户进行过搜索
      this.handleSearchList();
    } else {
      this.getList();
    }
  },
  watch: {
    // 这个查询参数设为监听属性，一旦发生变化，就写入vuex保存，这样用户从别的页面切回来不会丢状态
    listQuery: {
      deep: true,
      handler(newListQuery, oldListQuery) {
        console.log("newListQuery => ")
        console.log(newListQuery)
        this.listQuery = newListQuery;
        store.commit("SET_LIST_QUERY", newListQuery);
      },
      immediate: true
    },
  },
  methods: {
    handleCityChange(city) {
      this.listQuery.city = city
    },
    // 获取编号
    // getIndex(row) {
    //   return this.listQuery.pageSize * (this.listQuery.pageNum - 1) + (row + 1);
    // },
    // handleResetSearch() {
    //   this.listQuery = Object.assign({}, defaultListQuery);
    // },
    // handleSearchList() {
    //   this.listQuery.pageNum = 1;
    //   this.listLoading = true;
    //   selectByName(this.listQuery).then((response) => {
    //     // 查找的 api, 这里换一下函数名即可
    //     this.listLoading = false;
    //     this.list = response.data.list;
    //     this.total = response.data.total;
    //   });
    // },
    // getList() {
    //   this.listLoading = true; // 开启加载
    //   fetchList(this.listQuery).then((response) => {
    //     // 获取建筑的 api, 写一下
    //     this.listLoading = false; // 关闭加载
    //     console.log("获得的数据列表 =>");
    //     console.log(response.data.list);
    //     this.list = response.data.list;
    //     this.total = response.data.total;
    //     console.log("total =>" + this.total);
    //   });
    // },
    // handleSizeChange(val) {
    //   this.listQuery.pageNum = 1;
    //   this.listQuery.pageSize = val;
    //   this.getList();
    // },
    // methods: {
    // 获取编号
    getIndex(row) {
      return this.listQuery.pageSize * (this.listQuery.pageNum - 1) + (row + 1);
    },
    handleResetSearch() {
      // 如果是执行过搜索的情况下，才执行重置，直接重置会把选好的页码和每页个数也重置了
      this.curListQuery = Object.assign({}, defaultListQuery);
      this.listQuery = Object.assign({}, this.curListQuery)
      this.getList();
    },
    handleSearchClear() {
      this.listQuery.name = "";
    },
    handleSearchList() {
      // alert('hre')
      this.listQuery.city = this.curListQuery.city
      this.listQuery.name = this.curListQuery.name
      this.listQuery.categories = Object.assign({}, this.curListQuery.categories)
      this.listQuery.pageNum = 1;
      this.listLoading = true;
      this.getList()
    },
    getList() {
      console.log(this.listQuery)
      console.log(store.getters.listQuery)
      this.listLoading = true; // 开启加载
      fetchList(store.getters.listQuery).then((response) => {
        // 获取建筑的 api, 写一下
        this.listLoading = false; // 关闭加载
        console.log("获得的数据列表 =>");
        console.log(response.data.list);
        this.list = response.data.list;
        this.total = response.data.total;
        console.log("total =>" + this.total);
      });
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    handleDelete(index, row) {
      confirm("是否要删除该记录?", "删除").then(() => {
        deleteArchi(row.id).then((response) => {
          // 删除信息的 api, 写一下
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getList();
        });
        this.getList();
      });
    },
    handleAdd() {
      this.$router.push("/info/add");
      // 进行页面跳转
    },
    handleUpdate(index, row) {
      console.log("要修改的对象的值 => ");
      console.log(row);
      // 跳转页面并将 row 值传递过去
      this.$router.push({ path: "/info/update", query: { id: row.id } }); // 通过 this.$router.query.id 获得
    },
    handleDisplay(index, row) {
       // 如果需要创建新页面并跳转，就可以用下面注释掉的代码
        let routeUrl = this.$router.resolve({
            path: "/display",
            query: {id: row.id}
       });
       window.open(routeUrl.href, '_blank');
      // this.$router.push({ path: "/display", query: { id: row.id } }); // 通过 this.$router.query.id 获得
    },
  },
  handleAdd() {
    this.$router.push("/info/add");
    // 进行页面跳转
  },
  handleUpdate(index, row) {
    console.log("要修改的对象的值 => ");
    console.log(row);
    // 跳转页面并将 row 值传递过去
    this.$router.push({ path: "/info/update", query: { id: row.id } }); // 通过 this.$router.query.id 获得
    // },
  },
  filters: {},
};
</script>

<style scoped>
</style>
